<template>
	<view class="index_controller">
		<view class="bg_view">
			<image mode="scaleToFill" class="bg_img" :src="bg_datas[bg_select_item_index].bg_img"></image>
			<image mode="widthFix" class="bg_img_top" :src="bg_datas[bg_select_item_index].bg_img_top"></image>
			<image mode="widthFix" class="bg_img_bottom" :src="bg_datas[bg_select_item_index].bg_img_bottom"></image>
		</view>
		<view class="bottom_select_mod" v-if="step_index == 0">
			<view class="title">选择拜年海报模版</view>

			<view class="select_mods">
				<view class="item" v-for="item,index in select_mods" @click="bg_select_item_index = index">
					<image :class="{select:bg_select_item_index == index}" :src="item.img"></image>
					<view :class="{select:bg_select_item_index == index}" class="name">{{item.title}}</view>
				</view>
			</view>

			<view class="btn_next" @click="step_index = 1">
				下一步：选择或编写祝福语
			</view>
		</view>
		<view class="bottom_select_text" v-if="step_index == 1">
			<view class="input_v">
				<view class="title">选择拜年贺词</view>
				<textarea v-model="select_text" disabled class="input" maxlength="30" />
			</view>

			<view class="bottom_texts">

				<view class="title">
					选择拜年贺词
				</view>
				<view class="item" v-for="(item,index) in select_texts" @click="select_text = item.text">
					<view class="name">{{item.name}}</view>
					<view class="text">
						{{item.text}}
					</view>
				</view>

				<view class="btn_finish" @click="finish_click">
					完成拜年海报
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appId: 'Hello',
				wx_user_data: {
					"openid": "",
					"nickname": '',
				},
				step_index: 0,
				select_texts: [{
						text: '祝愿朋友，财源滚滚，吉祥高照，鸿运当头，笑口常开，新年快乐!',
						name: '贺词一'
					},
					{
						text: '愿新的一年，仍有阳光满路，温暖如初，平安喜乐，万事顺意！',
						name: '贺词二'
					},
					{
						text: '新年祝你运气爆棚，财源广进，笑口常开，百毒不侵，脱贫脱单不脱发！',
						name: '贺词三'
					},
				],
				select_text: '祝愿朋友，财源滚滚，吉祥高照，鸿运当头，笑口常开，新年快乐!',
				select_mods: [{
						img: '/static/img/mod_01.png',
						title: '模版一'
					},
					{
						img: '/static/img/mod_02.png',
						title: '模版二'
					},
					{
						img: '/static/img/mod_03.png',
						title: '模版三'
					}
				],
				bg_select_item_index: 0,
				bg_select_item: {
					bg_img: '/static/img/bg_01_01.png',
					bg_img_top: '/static/img/bg_01_02.png',
					bg_img_bottom: '/static/img/bg_01_03.png',
				},
				bg_datas: [{
						bg_img: '/static/img/bg_01_01.png',
						bg_img_top: '/static/img/bg_01_02.png',
						bg_img_bottom: '/static/img/bg_01_03.png',
					},
					{
						bg_img: '/static/img/bg_02_01.png',
						bg_img_top: '/static/img/bg_02_02.png',
						bg_img_bottom: '/static/img/bg_02_03.png',
					},
					{
						bg_img: '/static/img/bg_03_01.png',
						bg_img_top: '/static/img/bg_03_02.png',
						bg_img_bottom: '/static/img/bg_03_03.png',
					},
				]
			}
		},
		onLoad() {
			this.bg_select_item = this.bg_datas[2];

			this.getWxUserInfoCode()


		},
		methods: {
			getWxUserInfoCode() {
				//获取当前页面的url
				let link = window.location.href;
				console.log(link, 'link');
				let code = null; //授权获取的code,用它查询用户基本信息
				let appid = 'wxb9953d81bedf6f44'; //公众号或小程序id
				//就是用户授权后返回来的地址
				let uri = 'http://hjylb.peanut-data.com'; //重定向地址 
				// let uri = 'http://localhost:8080'; //重定向地址 
				let appsecret = "填写公众号开发者秘钥"; //公众号开发者秘钥
				// 判断link中有没有code=字符串，
				if (link.indexOf('code=') === -1) {
					//没有code= 发请求

					// let uri = encodeURIComponent(link);
					window.location.href =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
				} else {

					//回调函数已经执行 返回的链接存在code= 地址解析
					let temp = link.split("code=")[1];

					code = temp.split("&")[0];
					// uni.showToast({
					// 	title: code
					// })
					var that = this;

					this.service("/shareRecord/getOpenId", 'get', {
						code: code,
					}).then(res => {
						console.log(res)
						console.log(this.baseUrl)
						if (res.code == -1) {
							// uni.navigateTo({
							// 	url:'/pages/index/index'
							// })

							window.location.href = this.baseUrl
						} else {
							that.getUserInfo(res.data)
						}
						// uni.setStorageSync('storage_key', 'hello');

					}).catch(
						res => {
							window.location.href = this.baseUrl
						}
					);
					return;
					// uni.request({
					// 	url: "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + appid + "&secret=" +
					// 		appsecret + "&code=" + code + "&grant_type=authorization_code",
					// 	method: "GET",
					// 	success: function(res) {
					// 		console.log(res)
					// 		if (res.statusCode === 200) {
					// 			//以获取的openid
					// 			console.log(res.data.openid)
					// 			this.$api.msg('用户信息openid' + res.data.openid);
					// 		}

					// 	},
					// 	fail: function(err) {
					// 		console.log(err)
					// 	}
					// })



				}
			},
			// "openid": "oww5t6VL458h0ji1DY1OkMQVYsKM",
			//         "access_token": "53_Z9X6MsbaoV9_62dGo0Raa-doLTyqqSbc4E-ma8AzjTF7WaNN9LEerYohzJ75EvpXIS7piXb6ACloO6RM_vaKTtHfeSGP6yu-ruUIVc5DL1o",
			//         "refresh_token": "53_b6XihHD2u1OO3XcX8Klh5qBOpLI2WCoHV0fWmZt1qAeASzOl2knRJwGV-AWBgMRqLap5fTIJfCdMha3B8aafR6LEdjp9K9aq102zd2yt1rs",
			//         "scope": "snsapi_userinfo",
			//         "expires_in": 7200
			getUserInfo(data) {
				var that = this
				this.wx_user_data.openid = data.openid;
				this.wx_user_data.accessToken = data.accessToken;

				this.service("/shareRecord/getUserName", 'get', {
					openid: data.openid,
					accessToken: data.access_token
				}).then(res => {
					console.log(res)
					that.wx_user_data.nickname = res.data

				})



				// uni.request({
				// 	url: `http://api.weixin.qq.com/sns/userinfo?access_token=${data.access_token}&openid=${data.openid}&lang=zh_CN`,
				// 	method: "GET",
				// 	success: function(res) {
				// 		console.log(res)
				// 		// if (res.code == 0) {

				// 		// 	// console.log(res.data)
				// 		// 	that.wx_userInfo = res.data
				// 		// 	// this.$api.msg('用户信息openid' + res.data.openid);

				// 		// } 
				// 		that.wx_userInfo = res

				// 	},
				// 	fail: function(err) {
				// 		console.log(err)
				// 	}
				// })
			},
			//Appid wxb9953d81bedf6f44
			// 教程 https://www.jianshu.com/p/a027368fb26b
			// 官方文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
			getCode() {
				if (sessionStorage.getItem("openid") && sessionStorage.getItem("openid") != "undefined") {
					return false;
				}

				var code = this.getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
				var local =
					'http://hjylb.peanut-data.com/shareRecord/wx'; //这个地方是微信公众平台网页授权里面配置的域名，也是服务器的域名，把打包后的static和index放到webapps的文件夹下面。格式为域名+文件夹名称

				if (code == null || code === '') {
					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appId +
						'&redirect_uri=' + encodeURIComponent(local) +
						'&response_type=code&scope=snsapi_base&state=#wechat_redirect'
					console.log(code)
					uni.showToast({
						title: '222'
					})
				} else {
					uni.showToast({
						title: '222'
					})

					// getOpenId(code) //把code传给后台获取用户信息
				}
			},
			finish_click() {
				this.service("/shareRecord/save", 'post', {
					wxId: this.wx_user_data.openid,
					userName: this.wx_user_data.nickname,
					type: this.bg_select_item_index,
					text: this.select_text
				}).then(res => {
					console.log(res)
					 uni.setStorageSync('ismake', true);
					// uni.navigateTo({
					// 	url: '/pages/share/share?id=' + res.data.id
					// })
					
					window.location.href = this.baseUrl + '/pages/share/share?id=' + res.data.id

					setTimeout(() => {

						uni.$emit('make', {})
					}, 200)
				})
			}

		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>
